<template>
  <div class="detail_module_panel work_student">
    <h3 id="work_student" class="detail_panel_title detail_panel_title_icon work_student_icon">{{$t('common.workInformation')}}</h3>
    <div class="panel_info_content">
      <el-row>
        <!--工作信息start-->
        <el-col :span="12">
          <el-row class="row">
            <el-col class="label" :span="8"><div class="panel_info_content_title"><i class="dot"></i>{{$t('common.workInformation')}}</div></el-col>
          </el-row>
          <el-row class="row">
            <el-col class="label" :span="8">{{$t('common.careerType')}}</el-col>
            <el-col class="info" :span="16">{{ userData.jobType }}</el-col>
          </el-row>
          <el-row class="row">
            <el-col class="label" :span="8">{{$t('common.corpName')}}</el-col>
            <el-col class="info" :span="16">{{ userData.companyName }}
              <el-button v-if="userData.companyName" @click="searchWords(userData.companyName)" type="text" icon="search" size="mini">{{ $t('common.positiveCheck') }}</el-button>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col class="label" :span="8">{{$t('common.corpAddress')}}</el-col>
            <el-col class="info" :span="16">{{ userData.district }}{{ userData.province }}{{ userData.city }}{{ userData.address }}</el-col>
          </el-row>
          <el-row class="row">
            <el-col class="label" :span="8">{{$t('common.currPosition')}}</el-col>
            <el-col class="info" :span="16">{{ userData.position | switchPosition }}</el-col>
          </el-row>
          <el-row class="row">
            <el-col class="label" :span="8">{{$t('common.corpPhone')}}</el-col>
            <el-col class="info" :span="16">
              <button @click="call(userData.companyTel)" class="btn-call" :disabled="!orderId || isCalling">{{ userData.companyTel }}</button>
              <!--<hide-phone-num :phone="userData.companyTel"></hide-phone-num>&lt;!&ndash;脱敏显示电话号码&ndash;&gt;-->
              <el-button v-if="userData.companyTel" @click="searchWords(userData.companyTel)" type="text" icon="search" size="mini">{{$t('common.negativeCheck')}}</el-button>
              <!--<el-button v-if="userData.companyTel" @click="$call(userData.companyTel)" class="btn_call_center" type="text" icon="el-icon-phone">Call</el-button>-->
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col class="label" :span="8">{{$t('common.payInterval')}}</el-col>
            <el-col class="info" :span="16">{{ userData.payCycle | switchPayInterval }}</el-col>
          </el-row>
          <el-row class="row" v-if="userData.payCycle && userData.payCycle !== 'Daily'">
            <el-col class="label" :span="8">{{$t('common.payDay')}}</el-col>
            <el-col class="info" :span="16">
              <span>{{ userData.payDay.split(',')[0] }}</span>
              <span v-if="userData.payCycle === 'Once two weeks'">,{{ userData.payDay.split(',')[1] }}</span>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col class="label" :span="8">{{$t('common.monthlyIncome')}}</el-col><!--月收入-->
            <el-col class="info" :span="16">{{ userData.salary }}</el-col>
          </el-row>
        </el-col><!--工作信息end-->
      </el-row>
      <!--照片start-->
      <el-row class="row work_student_img">
        <el-col class="label" :span="4">{{$t('common.workCertification')}}</el-col>
        <el-col class="info" :span="20">
          <ul class="imgs">
            <li>
              <a @click="showImg(userData.payImg)" :style="backgroundImg(userData.payImg)" href="javascript:void(0);"></a>
              <span class="img_desc">{{$t('common.payrollPhoto')}}</span>
            </li><!--工资单照片-->
            <li>
              <a @click="showImg(userData.workerImg)" :style="backgroundImg(userData.workerImg)" href="javascript:void(0);"></a>
              <span class="img_desc">{{$t('common.employeePhoto')}}</span>
            </li><!--员工照-->
            <li>
                <a @click="showImg(userData.employeeIdImg)" :style="backgroundImg(userData.employeeIdImg)" href="javascript:void(0);"></a>
                <span class="img_desc">{{ $t('common.employeePhotoAdd') }}</span>
              </li><!--Employee ID -->
            <li>
              <a @click="showImg(userData.businessLicenseImg)" :style="backgroundImg(userData.businessLicenseImg)" href="javascript:void(0);"></a>
              <span class="img_desc">{{$t('common.businessPermit')}}</span>
            </li><!--营业执照-->
          </ul>
        </el-col>
      </el-row>
    </div>
    <show-image-video :visible.sync="showImgDialog" :img-src="imgUrl">图片展示</show-image-video>
  </div>
</template>

<script>
    import ShowImageVideo from '@/components/show-image-video';

    let that = null;
    export default {
        name: 'workStudent',
        props: {
            userData: {
                type: Object
            },
            isCalling: {
                type: Boolean
            }
        },
        components: {
            ShowImageVideo
        },
        data() {
            return {
                showImgDialog: false,
                imgUrl: '',
                orderId: '',
            };
        },
        computed: {
            companyAddress() {
                let address = '';
                const jobInfo = this.userData;
                if (jobInfo.province) {
                    address = jobInfo.province + ' ' + jobInfo.city + ' ' + jobInfo.district + ' ' + jobInfo.address;
                }
                return address;
            },
            schoolAddress() {
                let address = '';
                const jobInfo = this.userData;
                if (jobInfo.sProvince) {
                    address = jobInfo.sProvince + ' ' + jobInfo.sCity + ' ' + jobInfo.sDistrict + ' ' + jobInfo.sAddress;
                }
                return address;
            }
        },
        methods: {
//        正查反查
            searchWords(words) {
                this.$openNewBlank('https://www.google.com/search?q=' + encodeURIComponent(words));
            },
            backgroundImg(url) {
                // 构造图片展示
                const style = {};
                if (url) {
                    style.backgroundImage = 'url("' + url + '")';
                }
                return style;
            },
            showImg(url) {
                if (url) {
                    this.showImgDialog = true;
                    this.imgUrl = url;
                }
            },
            call(number) {
                this.$emit('call',number);
            }
        },
        filters: {
            switchPosition(type) {
                switch (type) {
                    case 'Staff':
                        return that.$t('common.position.Staff');// 员工
                    case 'Team Leader':
                        return that.$t('common.position.TeamLeader');// 组长
                    case 'Manager':
                        return that.$t('common.position.Manager');// 经理
                    case 'Senior Manger':
                        return that.$t('common.position.SeniorManger');// 高级经理
                    case 'Owner':
                        return that.$t('common.position.Owner');// 老板
                    default:
                        return type;
                }
            },
            switchPayInterval(type) {
                switch (type) {
                    case 'Once two weeks':
                        return that.$t('common.payIntervalData.OnceEveryTwoWeeks');// 每两周一次
                    case 'Monthly':
                        return that.$t('common.payIntervalData.OnceEveryMonth');// 每月一次
                    case 'Weekly':
                        return that.$t('common.payIntervalData.OnceEveryWeek');// 每周一次
                    case 'Daily':
                        return that.$t('common.payIntervalData.Everyday');// 每天
                    default:
                        return type;
                }
            },
        },
        created() {
            that = this;
            // console.log('-------------->');
            // console.log(this.userData);
            this.orderId = this.$route.params.orderId;
        }
    };
</script>

<style lang="scss" scoped>
  .work_student_img{
    margin-top: 12px;
  }
  .row_course .info.el-col.el-col-16 {
    word-wrap:break-word; word-break:normal;
  }
  .el-button {
    margin-left: 10px;
    /*border-radius: 8px;*/
  }
</style>
